<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-30 20:27:43
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-20 15:45:34
 * @Description: slider
-->
<template>
  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
    <div
      class="imgBox"
      :style="{ width: yzmdata.data.originalWidth + 'px', height: yzmdata.data.originalHeight + 'px' }"
    >
      <img :src="yzmdata.data.backImage" style="width:100%;height:100%" />
      <img
        class="slider"
        :src="yzmdata.data.slidingImage"
        :style="{ left: distance + 'px', top: yzmdata.data.randomY + 'px' }"
        :width="yzmdata.data.sliderWidth"
        :height="yzmdata.data.sliderHeight"
      />
      <img src="./refresh.png" class="refresh" @click="init" style="width:30px" />
    </div>
    <div class="handle" :style="{ width: yzmdata.data.originalWidth + 'px' }">
      <span class="bgcolor" :style="{ width: distance + 'px', background: bgColor }"></span>
      <span class="swiper" :style="{ left: distance + 'px' }" @mousedown="mouseDown">
        <svg
          t="1639986126516"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2027"
          width="200"
          height="200"
        >
          <path
            d="M881 562H81c-27.6 0-50-22.4-50-50s22.4-50 50-50h800c27.6 0 50 22.4 50 50s-22.4 50-50 50z"
            p-id="2028"
          />
          <path
            d="M907.6 540.7L695.5 328.6c-19.5-19.5-19.5-51.2 0-70.7s51.2-19.5 70.7 0L978.4 470c19.5 19.5 19.5 51.2 0 70.7-19.6 19.6-51.2 19.6-70.8 0z"
            p-id="2029"
          />
          <path
            d="M695.5 695.4l212.1-212.1c19.5-19.5 51.2-19.5 70.7 0s19.5 51.2 0 70.7L766.2 766.1c-19.5 19.5-51.2 19.5-70.7 0s-19.5-51.2 0-70.7z"
            p-id="2030"
          />
        </svg>
      </span>
      <span class="text">{{ verifyText }}</span>
    </div>
  </div>
</template>

<script lang='ts'>
import { message } from 'ant-design-vue'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { getSliderVerdata, preVercode } from '../../api/common'


export default defineComponent({
  name: 'verify',
  props: {
    // 传入数据，判断是登录、注册、修改密码
    verifyType: {
      defalut: 'LOGIN',
      type: String
    }
  },
  setup(props, context) {
    const { verifyType } = toRefs(props)
    const show = ref(false)  // 验证码的显示隐藏
    const type = ref(verifyType.value)   // 请求类型
    const yzmdata = reactive({
      data: {
        backImage: '',
        slidingImage: '',
        originalHeight: 150,
        originalWidth: 300,
        sliderWidth: 60,
        sliderHeight: 60,
        randomY: ''
      }
    })   // 验证码相关数据
    const distance = ref(0)   // 拼图移动距离
    const flag = ref(false)  // 判断滑块是否按下
    const downX = ref(0)    // 鼠标按下的位置
    const bgColor = ref('#04ad11')   // 滑动背景颜色
    const verifyText = ref('拖动滑块解锁')    // 文字提示


    /**
     * @description：鼠标按下事件，开始拖动模块
     */
    const mouseDown = (e: { clientX: number }) => {
      console.log('鼠标按下', flag.value)
      downX.value = e.clientX
      flag.value = true
    }

    /**
     * @description 鼠标移动事件，计算距离
     */
    const mouseMove = (e: { clientX: number }) => {
      console.log('鼠标移动', flag.value)
      if (flag.value) {
        let offset = e.clientX - downX.value
        if (offset > yzmdata.data.originalWidth - 43) {
          distance.value = yzmdata.data.originalWidth - 43
        } else if (offset < 0) {
          distance.value = 0
        } else {
          distance.value = offset
        }
      }
    }

    /**
     * @description 鼠标抬起事件，验证是否正确
     * 
     */
    const mouseUp = async () => {
      console.log('鼠标抬起', flag.value)
      if (!flag.value) {
        return false
      }
      flag.value = false
      let params = {
        verificationEnums: type.value || '',
        xPos: distance.value
      }
      const res = await preVercode(params)
      try {
        if (res.success) {
          if (res.result) {
            bgColor.value = 'green'
            verifyText.value = 'Passed verification'
            context.emit('change', { status: true, distance: distance.value })
          } else {
            bgColor.value = 'red'
            verifyText.value = 'Failed verification'
            setTimeout(() => {
              init()
            }, 1000)
            context.emit('change', { status: false, distance: distance.value })
          }
        } else {
          init()
        }
      } catch {
        init()
      }
    }

    /**
     * @description:初始化数据
     */
    const init = async () => {
      flag.value = false
      downX.value = 0
      distance.value = 0
      bgColor.value = '#04ad11'
      verifyText.value = 'Drag slider to unlock'
      let param = {
        verificationEnums: verifyType.value
      }
      const res = await getSliderVerdata(param)
      if (res.result) {
        yzmdata.data = res.result
        show.value = true
      } else {
        message.warning('请求失败请重试')
      }
    }


    return { show, type, yzmdata, distance, flag, downX, bgColor, verifyText, mouseDown, mouseMove, mouseUp, init }
  }
})




</script>
<style lang='scss' scoped>
.verify-content {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #999;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.imgBox {
  width: 594px;
  height: 478px;
  position: relative;
  overflow: hidden;

  .slider {
    position: absolute;
    cursor: pointer;
  }

  .refresh {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }
}
.handle {
  border: 1px solid #e4dede;
  margin-top: 5px;
  height: 42px;
  background: #ddd;
  position: relative;
  .bgcolor {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    opacity: 0.5;
    background: #04ad11;
  }

  .swiper {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    .ivu-icon {
      font-size: 20px;
    }
    img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
  }

  .text {
    display: inline-block;
    width: inherit;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    user-select: none;
  }
}
</style>
